<template>
    <div class="static">
        <header>
            <img src="../../../assets/assets/头部.png" alt="">
        </header>
        <div class="site">北京理工大学国防科技园2号楼10层</div>
        <div class="search">
            <input type="text" placeholder="山姆会员商店优惠商品">
        </div>
        <div class="pic"></div>
        <div class="sort">
            <div class="box">
                <div><img src="../../../assets/assets/超市.png" alt=""></div>
                <p>超市便利</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/水果店.png" alt=""> </div>
                <p>水果店</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/菜市场.png" alt=""></div>
                <p>菜市场</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/鲜花.png" alt=""></div>
                <p>鲜花绿植</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/医药健康.png" alt=""></div>
                <p>医药健康</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/家居.png" alt=""></div>
                <p>家居时尚</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/蛋糕.png" alt=""></div>
                <p>烘焙蛋糕</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/签到.png" alt=""></div>
                <p>签到</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/大牌免运.png" alt=""></div>
                <p>大牌免运</p>
            </div>
            <div class="box">
                <div><img src="../../../assets/assets/红包.png" alt=""></div>
                <p>红包套餐</p>
            </div>
        </div>

    </div>
</template>


<script setup>
import { ref } from "vue"
</script>

<style lang="scss" scoped>
.static {
    width: 100%;
    height: 3.78rem;
    // background-color: aqua;

    header {
        width: 100%;
        height: .2rem;
        background-color: aliceblue;

        img {
            width: 100%;
            height: .2rem;

        }
    }


    .site {
        width: 3.39rem;
        height: 0.22rem;
        margin: 0 auto;
        background-color: aliceblue;
        margin-top: .16rem;
        line-height: .22rem;
    }

    .search {
        width: 3.39rem;
        margin: 0 auto;

        input {
            width: 3.39rem;
            height: 0.32rem;
            margin: 0 auto;
            border-radius: 15px;
            margin-top: .16rem;
            background-color: #F5F5F5;
            border: none;
        }
    }

    .pic {
        width: 3.39rem;
        height: 0.86rem;
        background-color: aliceblue;
        margin: 0 auto;
        margin-top: .11rem;
        border-radius: .1rem;
    }

    .sort {
        width: 3.39rem;
        height: 1.74rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;

        .box {
            width: .57rem;
            height: .63rem;
            text-align: center;

            div {
                width: .4rem;
                height: .4rem;
                background-color: burlywood;
                border-radius: 50%;
                margin: 0 auto;
            }
        }

    }
}
</style>